<template>
	<view>
		<view>
			<view class="title">订单信息</view>
			<uni-card :is-shadow="true" :border="false">
				<view class="order">
					<view class="massage">
						<view class="">订单号：23456787654567</view>
						<view class="">已完成</view>
					</view>
					<view class="">服务项目：车辆保养</view>
					<view class="">下单时间：2024-10-10 10：56</view>
					<view class="">预约时间：2024-10-10 10：56</view>
					<view class="">车辆：车辆保养</view>
					<view class="">备注：</view>
				</view>
			</uni-card>
		</view>
		<view>
			<view class="title">订单详情</view>
			<uni-card :is-shadow="true" :border="false">
				<view class="order">
					<view class="orderDetail">
						<view class="">车辆清洁</view>
						<view class="">￥199</view>
					</view>
					<view class="orderDetail">
						<view class="">车辆附加费用</view>
						<view class="">￥199</view>
					</view>
				</view>
			</uni-card>
		</view>
		<view>
			<uni-card :is-shadow="true" :border="false">
				<view class="order">
					<view class="orderDetail">
						<view class="">原价</view>
						<view class="">￥199</view>
					</view>
					<view class="preferential">
						<view class="">优惠</view>
						<view class="">-￥10</view>
					</view>
					<view class="orderDetail">
						<view class="">支付金额</view>
						<view class="pay">￥189</view>
					</view>
				</view>
			</uni-card>
		</view>
		<view class="evaluate">评价结果</view>
		<view class="evaluate">评价时间：2024-10-10 10：56</view>
		<view class="evaluate result">
			<view class="">评价结果：</view>
			<uni-rate size="23" :value="3" readonly="true" />
		</view>
		<view class="evaluate">评价语：评价语评价语评价语评价语评价语</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.title {
		font-size: 36rpx;
		padding: 30rpx 40rpx 0;
	}

	.order {
		color: #101010;
	}

	.massage,
	.orderDetail {
		display: flex;
		justify-content: space-between;
	}

	.massage>view,
	.orderDetail>view {
		margin: 10rpx 0;
	}

	.massage>view:nth-child(2),.preferential>view:nth-child(2) {
		color: #ff0000;
	}
	.preferential{
		display: flex;
		justify-content: space-between;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #BBBBBB;
	}
	.pay{
		font-weight: bold;
	}
	.evaluate{
		padding: 10rpx 40rpx 0;
	}
	.result{
		display: flex;
	}
</style>